<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stellar Communications | Mission: Khushi</title>
<style>
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
height: 100%;
background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
overflow: hidden;
color: #f8fafc;
}
.mission-control { position: relative; width: 100%; height: 100%; }
.header {
position: absolute;
top: 0; left: 0; right: 0;
background: rgba(15, 23, 42, 0.98);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(148, 163, 184, 0.1);
padding: 24px 48px;
z-index: 100;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1400px;
margin: 0 auto;
}
.logo {
display: flex;
align-items: center;
gap: 15px;
}
.logo-icon {
width: 36px; height: 36px;
background: linear-gradient(135deg, #3b82f6, #1e40af);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
z-index: 100;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1400px;
margin: 0 auto;
}
.logo {
display: flex;
align-items: center;
gap: 15px;
}
.logo-icon {
width: 36px; height: 36px;
background: linear-gradient(135deg, #3b82f6, #1e40af);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.logo-text {
font-size: 1.25rem;
font-weight: 500;
letter-spacing: -0.025em;
}
.status-indicator {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: rgba(34, 197, 94, 0.08);
border: 1px solid rgba(34, 197, 94, 0.2);
border-radius: 6px;
font-size: 0.875rem;
font-weight: 500;
}
.status-dot {
width: 8px; height: 8px;
background: #22c55e;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
font-size: 1.25rem;
font-weight: 500;
letter-spacing: -0.025em;
}
.status-indicator {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: rgba(34, 197, 94, 0.08);
border: 1px solid rgba(34, 197, 94, 0.2);
border-radius: 6px;
font-size: 0.875rem;
font-weight: 500;
}
.status-dot {
width: 8px; height: 8px;
background: #22c55e;
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.planet-selection-hint {
position: absolute;
top: 120px; left: 50%;
transform: translateX(-50%);
background: rgba(15, 23, 42, 0.95);
backdrop-filter: blur(20px);
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 12px;
padding: 16px 24px;
z-index: 60;
text-align: center;
animation: hint-pulse 3s ease-in-out infinite;
}
@keyframes hint-pulse { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.6; } }
.hint-text {
font-size: 0.875rem;
color: #94a3b8;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
.space-field {
position: absolute;
top: 120px; left: 50%;
transform: translateX(-50%);
background: rgba(15, 23, 42, 0.95);
backdrop-filter: blur(20px);
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 12px;
padding: 16px 24px;
z-index: 60;
text-align: center;
animation: hint-pulse 3s ease-in-out infinite;
}
@keyframes hint-pulse { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.6; } }
.hint-text {
font-size: 0.875rem;
color: #94a3b8;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
.space-field {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
overflow: hidden;
}
.stars-layer { position: absolute; width: 100%; height: 100%; }
.star {
position: absolute;
background: #e2e8f0;
border-radius: 50%;
animation: subtle-twinkle 4s ease-in-out infinite;
}
.star.bright {
background: #f8fafc;
box-shadow: 0 0 2px rgba(248, 250, 252, 0.5);
}
@keyframes subtle-twinkle { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } }
.solar-system {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 100%; height: 100%;
top: 0; left: 0;
width: 100%; height: 100%;
overflow: hidden;
}
.stars-layer { position: absolute; width: 100%; height: 100%; }
.star {
position: absolute;
background: #e2e8f0;
border-radius: 50%;
animation: subtle-twinkle 4s ease-in-out infinite;
}
.star.bright {
background: #f8fafc;
box-shadow: 0 0 2px rgba(248, 250, 252, 0.5);
}
@keyframes subtle-twinkle { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.8; } }
.solar-system {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 100%; height: 100%;
}
.orbit {
position: absolute;
border: 1px solid rgba(148, 163, 184, 0.06);
border-radius: 50%;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
.orbit-mercury { width: 200px; height: 200px; }
.orbit-venus { width: 280px; height: 280px; }
.orbit-earth { width: 360px; height: 360px; }
.orbit-mars { width: 480px; height: 480px; }
.orbit-jupiter { width: 720px; height: 720px; }
.orbit-saturn { width: 900px; height: 900px; }
.orbit-uranus { width: 1080px; height: 1080px; }
.orbit-neptune { width: 1200px; height: 1200px; }
.orbit-asteroid {
width: 600px; height: 600px;
border-style: dashed;
border-color: rgba(148, 163, 184, 0.05);
}
.celestial-body {
position: absolute;
border-radius: 50%;
.orbit {
position: absolute;
border: 1px solid rgba(148, 163, 184, 0.06);
border-radius: 50%;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
.orbit-mercury { width: 200px; height: 200px; }
.orbit-venus { width: 280px; height: 280px; }
.orbit-earth { width: 360px; height: 360px; }
.orbit-mars { width: 480px; height: 480px; }
.orbit-jupiter { width: 720px; height: 720px; }
.orbit-saturn { width: 900px; height: 900px; }
.orbit-uranus { width: 1080px; height: 1080px; }
.orbit-neptune { width: 1200px; height: 1200px; }
.orbit-asteroid {
width: 600px; height: 600px;
border-style: dashed;
border-color: rgba(148, 163, 184, 0.05);
}
.celestial-body {
position: absolute;
border-radius: 50%;
top: 50%; left: 50%;
cursor: pointer;
transition: all 0.3s ease;
min-width: 40px; min-height: 40px;
pointer-events: auto;
z-index: 10;
}
.celestial-body:hover {
transform: scale(1.2);
filter: brightness(1.3);
z-index: 20;
}
.celestial-body.selected {
animation: planet-selected 2s ease-in-out infinite;
transform: scale(1.3);
filter: brightness(1.4);
z-index: 25;
}
@keyframes planet-selected {
0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.6), 0 0 40px rgba(59, 130, 246, 0.3); }
50% { box-shadow: 0 0 30px rgba(59, 130, 246, 0.8), 0 0 60px rgba(59, 130, 246, 0.5); }
}
.planet-orbit {
cursor: pointer;
transition: all 0.3s ease;
min-width: 40px; min-height: 40px;
pointer-events: auto;
z-index: 10;
}
.celestial-body:hover {
transform: scale(1.2);
filter: brightness(1.3);
z-index: 20;
}
.celestial-body.selected {
animation: planet-selected 2s ease-in-out infinite;
transform: scale(1.3);
filter: brightness(1.4);
z-index: 25;
}
@keyframes planet-selected {
0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.6), 0 0 40px rgba(59, 130, 246, 0.3); }
50% { box-shadow: 0 0 30px rgba(59, 130, 246, 0.8), 0 0 60px rgba(59, 130, 246, 0.5); }
}
.planet-orbit {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
animation-timing-function: linear;
animation-iteration-count: infinite;
pointer-events: none;
z-index: 15;
}
.mercury-orbit { width: 200px; height: 200px; animation: orbit 25s linear infinite; }
.venus-orbit { width: 280px; height: 280px; animation: orbit 35s linear infinite; }
.earth-orbit { width: 360px; height: 360px; animation: orbit 45s linear infinite; }
.mars-orbit { width: 480px; height: 480px; animation: orbit 60s linear infinite; }
.jupiter-orbit { width: 720px; height: 720px; animation: orbit 120s linear infinite; }
.saturn-orbit { width: 900px; height: 900px; animation: orbit 150s linear infinite; }
.uranus-orbit { width: 1080px; height: 1080px; animation: orbit 200s linear infinite; }
.neptune-orbit { width: 1200px; height: 1200px; animation: orbit 300s linear infinite; }
@keyframes orbit {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.sun {
width: 64px; height: 64px;
background: radial-gradient(circle at 30% 30%, #fbbf24 0%, #f59e0b 40%, #d97706 80%,
#b45309 100%);
top: 50%; left: 50%;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
animation-timing-function: linear;
animation-iteration-count: infinite;
pointer-events: none;
z-index: 15;
}
.mercury-orbit { width: 200px; height: 200px; animation: orbit 25s linear infinite; }
.venus-orbit { width: 280px; height: 280px; animation: orbit 35s linear infinite; }
.earth-orbit { width: 360px; height: 360px; animation: orbit 45s linear infinite; }
.mars-orbit { width: 480px; height: 480px; animation: orbit 60s linear infinite; }
.jupiter-orbit { width: 720px; height: 720px; animation: orbit 120s linear infinite; }
.saturn-orbit { width: 900px; height: 900px; animation: orbit 150s linear infinite; }
.uranus-orbit { width: 1080px; height: 1080px; animation: orbit 200s linear infinite; }
.neptune-orbit { width: 1200px; height: 1200px; animation: orbit 300s linear infinite; }
@keyframes orbit {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
.sun {
width: 64px; height: 64px;
background: radial-gradient(circle at 30% 30%, #fbbf24 0%, #f59e0b 40%, #d97706 80%,
#b45309 100%);
top: 50%; left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 24px rgba(251, 191, 36, 0.3);
animation: solar-pulse 6s ease-in-out infinite;
position: absolute;
overflow: hidden;
z-index: 10;
}
.sun::before {
content: '';
position: absolute;
top: 10%; left: 15%;
width: 20px; height: 20px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent);
border-radius: 50%;
animation: solar-spot 8s linear infinite;
}
@keyframes solar-pulse {
0%, 100% {
box-shadow: 0 0 24px rgba(251, 191, 36, 0.3);
transform: translate(-50%, -50%) scale(1);
}
50% {
box-shadow: 0 0 32px rgba(251, 191, 36, 0.4);
transform: translate(-50%, -50%) scale(1.02);
}
box-shadow: 0 0 24px rgba(251, 191, 36, 0.3);
animation: solar-pulse 6s ease-in-out infinite;
position: absolute;
overflow: hidden;
z-index: 10;
}
.sun::before {
content: '';
position: absolute;
top: 10%; left: 15%;
width: 20px; height: 20px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.8), transparent);
border-radius: 50%;
animation: solar-spot 8s linear infinite;
}
@keyframes solar-pulse {
0%, 100% {
box-shadow: 0 0 24px rgba(251, 191, 36, 0.3);
transform: translate(-50%, -50%) scale(1);
}
50% {
box-shadow: 0 0 32px rgba(251, 191, 36, 0.4);
transform: translate(-50%, -50%) scale(1.02);
}
}
@keyframes solar-spot {
0% { transform: rotate(0deg) translateX(30px) rotate(0deg); }
100% { transform: rotate(360deg) translateX(30px) rotate(-360deg); }
}
.earth {
width: 50px; height: 50px;
background: radial-gradient(circle at 30% 30%, #60a5fa 0%, #3b82f6 30%, #1e40af 60%,
#1e3a8a 100%);
top: -25px; right: -25px;
box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
position: absolute;
overflow: hidden;
}
.earth::before {
content: '';
position: absolute;
top: 20%; left: 10%;
width: 15px; height: 12px;
background: #22c55e;
border-radius: 50% 30% 60% 40%;
opacity: 0.8;
}
.earth::after {
@keyframes solar-spot {
0% { transform: rotate(0deg) translateX(30px) rotate(0deg); }
100% { transform: rotate(360deg) translateX(30px) rotate(-360deg); }
}
.earth {
width: 50px; height: 50px;
background: radial-gradient(circle at 30% 30%, #60a5fa 0%, #3b82f6 30%, #1e40af 60%,
#1e3a8a 100%);
top: -25px; right: -25px;
box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
position: absolute;
overflow: hidden;
}
.earth::before {
content: '';
position: absolute;
top: 20%; left: 10%;
width: 15px; height: 12px;
background: #22c55e;
border-radius: 50% 30% 60% 40%;
opacity: 0.8;
}
.earth::after {
content: '';
position: absolute;
bottom: 25%; right: 15%;
width: 12px; height: 10px;
background: #16a34a;
border-radius: 40% 60% 30% 50%;
opacity: 0.7;
}
.earth-atmosphere {
position: absolute;
width: 55px; height: 55px;
border: 2px solid rgba(96, 165, 250, 0.3);
border-radius: 50%;
top: -27.5px; right: -27.5px;
animation: atmosphere-glow 3s ease-in-out infinite alternate;
z-index: -1;
}
@keyframes atmosphere-glow {
0% { box-shadow: 0 0 10px rgba(96, 165, 250, 0.2); }
100% { box-shadow: 0 0 20px rgba(96, 165, 250, 0.4); }
}
.mars {
width: 42px; height: 42px;
background: radial-gradient(circle at 25% 25%, #f87171 0%, #dc2626 40%, #991b1b 80%,
#7f1d1d 100%);
position: absolute;
bottom: 25%; right: 15%;
width: 12px; height: 10px;
background: #16a34a;
border-radius: 40% 60% 30% 50%;
opacity: 0.7;
}
.earth-atmosphere {
position: absolute;
width: 55px; height: 55px;
border: 2px solid rgba(96, 165, 250, 0.3);
border-radius: 50%;
top: -27.5px; right: -27.5px;
animation: atmosphere-glow 3s ease-in-out infinite alternate;
z-index: -1;
}
@keyframes atmosphere-glow {
0% { box-shadow: 0 0 10px rgba(96, 165, 250, 0.2); }
100% { box-shadow: 0 0 20px rgba(96, 165, 250, 0.4); }
}
.mars {
width: 42px; height: 42px;
background: radial-gradient(circle at 25% 25%, #f87171 0%, #dc2626 40%, #991b1b 80%,
#7f1d1d 100%);
top: -21px; right: -21px;
box-shadow: 0 0 15px rgba(220, 38, 38, 0.4);
position: absolute;
overflow: hidden;
}
.mars::before {
content: '';
position: absolute;
top: 30%; left: 20%;
width: 8px; height: 8px;
background: #450a0a;
border-radius: 50%;
box-shadow: 15px 5px 0 2px #450a0a, 8px 15px 0 1px #450a0a;
}
.jupiter {
width: 70px;
height: 70px;
background:
linear-gradient(0deg, transparent 0%, rgba(217, 119, 6, 0.3) 20%, transparent 25%),
linear-gradient(0deg, transparent 35%, rgba(146, 64, 14, 0.4) 40%, transparent 45%),
linear-gradient(0deg, transparent 55%, rgba(217, 119, 6, 0.2) 60%, transparent 65%),
linear-gradient(0deg, transparent 75%, rgba(146, 64, 14, 0.3) 80%, transparent 85%),
radial-gradient(circle at 30% 30%, #fbbf24 0%, #f59e0b 40%, #d97706 70%, #92400e
100%);
top: -35px;
right: -35px;
box-shadow: 0 0 15px rgba(220, 38, 38, 0.4);
position: absolute;
overflow: hidden;
}
.mars::before {
content: '';
position: absolute;
top: 30%; left: 20%;
width: 8px; height: 8px;
background: #450a0a;
border-radius: 50%;
box-shadow: 15px 5px 0 2px #450a0a, 8px 15px 0 1px #450a0a;
}
.jupiter {
width: 70px;
height: 70px;
background:
linear-gradient(0deg, transparent 0%, rgba(217, 119, 6, 0.3) 20%, transparent 25%),
linear-gradient(0deg, transparent 35%, rgba(146, 64, 14, 0.4) 40%, transparent 45%),
linear-gradient(0deg, transparent 55%, rgba(217, 119, 6, 0.2) 60%, transparent 65%),
linear-gradient(0deg, transparent 75%, rgba(146, 64, 14, 0.3) 80%, transparent 85%),
radial-gradient(circle at 30% 30%, #fbbf24 0%, #f59e0b 40%, #d97706 70%, #92400e
100%);
top: -35px;
right: -35px;
box-shadow: 0 0 30px rgba(245, 158, 11, 0.4);
position: absolute;
overflow: hidden;
}
.jupiter::before {
content: '';
position: absolute;
top: 35%;
left: 60%;
width: 20px;
height: 15px;
background: radial-gradient(ellipse, #dc2626 0%, #991b1b 100%);
border-radius: 50%;
animation: great-red-spot 15s linear infinite;
}
@keyframes great-red-spot {
0% { transform: rotate(0deg) translateX(25px) rotate(0deg); }
100% { transform: rotate(360deg) translateX(25px) rotate(-360deg); }
}
.saturn {
width: 60px;
height: 60px;
background: radial-gradient(circle at 30% 30%, #fde047 0%, #eab308 50%, #ca8a04 100%);
top: -30px;
position: absolute;
overflow: hidden;
}
.jupiter::before {
content: '';
position: absolute;
top: 35%;
left: 60%;
width: 20px;
height: 15px;
background: radial-gradient(ellipse, #dc2626 0%, #991b1b 100%);
border-radius: 50%;
animation: great-red-spot 15s linear infinite;
}
@keyframes great-red-spot {
0% { transform: rotate(0deg) translateX(25px) rotate(0deg); }
100% { transform: rotate(360deg) translateX(25px) rotate(-360deg); }
}
.saturn {
width: 60px;
height: 60px;
background: radial-gradient(circle at 30% 30%, #fde047 0%, #eab308 50%, #ca8a04 100%);
top: -30px;
right: -30px;
box-shadow: 0 0 25px rgba(234, 179, 8, 0.4);
position: absolute;
}
.saturn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
border: 3px solid rgba(234, 179, 8, 0.6);
border-radius: 50%;
transform: translate(-50%, -50%) rotateX(75deg);
box-shadow:
0 0 0 2px rgba(234, 179, 8, 0.3),
0 0 0 6px rgba(234, 179, 8, 0.2);
}
.saturn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
box-shadow: 0 0 25px rgba(234, 179, 8, 0.4);
position: absolute;
}
.saturn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
border: 3px solid rgba(234, 179, 8, 0.6);
border-radius: 50%;
transform: translate(-50%, -50%) rotateX(75deg);
box-shadow:
0 0 0 2px rgba(234, 179, 8, 0.3),
0 0 0 6px rgba(234, 179, 8, 0.2);
}
.saturn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
border: 2px solid rgba(234, 179, 8, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%) rotateX(75deg);
}
.venus {
width: 46px;
height: 46px;
background: radial-gradient(circle at 25% 25%, #fde047 0%, #eab308 60%, #ca8a04 100%);
top: -23px;
right: -23px;
box-shadow: 0 0 18px rgba(234, 179, 8, 0.5);
position: absolute;
overflow: hidden;
}
.venus::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%),
linear-gradient(-45deg, transparent 40%, rgba(255, 255, 255, 0.05) 60%, transparent 80%);
border-radius: 50%;
border-radius: 50%;
transform: translate(-50%, -50%) rotateX(75deg);
}
.venus {
width: 46px;
height: 46px;
background: radial-gradient(circle at 25% 25%, #fde047 0%, #eab308 60%, #ca8a04 100%);
top: -23px;
right: -23px;
box-shadow: 0 0 18px rgba(234, 179, 8, 0.5);
position: absolute;
overflow: hidden;
}
.venus::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%),
linear-gradient(-45deg, transparent 40%, rgba(255, 255, 255, 0.05) 60%, transparent 80%);
border-radius: 50%;
animation: venus-atmosphere 8s linear infinite;
}
@keyframes venus-atmosphere {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.mercury {
width: 40px;
height: 40px;
background: radial-gradient(circle at 30% 30%, #a3a3a3 0%, #737373 50%, #525252 100%);
top: -20px;
right: -20px;
box-shadow: 0 0 12px rgba(115, 115, 115, 0.4);
position: absolute;
overflow: hidden;
}
.mercury::before {
content: '';
position: absolute;
top: 25%;
left: 20%;
width: 4px;
height: 4px;
background: #404040;
}
@keyframes venus-atmosphere {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.mercury {
width: 40px;
height: 40px;
background: radial-gradient(circle at 30% 30%, #a3a3a3 0%, #737373 50%, #525252 100%);
top: -20px;
right: -20px;
box-shadow: 0 0 12px rgba(115, 115, 115, 0.4);
position: absolute;
overflow: hidden;
}
.mercury::before {
content: '';
position: absolute;
top: 25%;
left: 20%;
width: 4px;
height: 4px;
background: #404040;
border-radius: 50%;
box-shadow:
8px 2px 0 1px #404040,
4px 8px 0 1px #404040,
10px 10px 0 0.5px #404040;
}
.uranus {
width: 55px;
height: 55px;
background: radial-gradient(circle at 30% 30%, #06b6d4 0%, #0891b2 50%, #0e7490 100%);
top: -27.5px;
right: -27.5px;
box-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
position: absolute;
overflow: hidden;
}
.uranus::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 70px;
height: 70px;
border: 2px solid rgba(6, 182, 212, 0.4);
border-radius: 50%;
box-shadow:
8px 2px 0 1px #404040,
4px 8px 0 1px #404040,
10px 10px 0 0.5px #404040;
}
.uranus {
width: 55px;
height: 55px;
background: radial-gradient(circle at 30% 30%, #06b6d4 0%, #0891b2 50%, #0e7490 100%);
top: -27.5px;
right: -27.5px;
box-shadow: 0 0 20px rgba(6, 182, 212, 0.4);
position: absolute;
overflow: hidden;
}
.uranus::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 70px;
height: 70px;
border: 2px solid rgba(6, 182, 212, 0.4);
border-radius: 50%;
transform: translate(-50%, -50%) rotateX(85deg);
box-shadow:
0 0 0 1px rgba(6, 182, 212, 0.2),
0 0 0 4px rgba(6, 182, 212, 0.1);
}
.uranus::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 90px;
height: 90px;
border: 1px solid rgba(6, 182, 212, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%) rotateX(85deg);
}
.neptune {
width: 52px;
height: 52px;
background: radial-gradient(circle at 30% 30%, #3b82f6 0%, #1d4ed8 50%, #1e40af 100%);
top: -26px;
right: -26px;
box-shadow: 0 0 18px rgba(59, 130, 246, 0.4);
position: absolute;
overflow: hidden;
box-shadow:
0 0 0 1px rgba(6, 182, 212, 0.2),
0 0 0 4px rgba(6, 182, 212, 0.1);
}
.uranus::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 90px;
height: 90px;
border: 1px solid rgba(6, 182, 212, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%) rotateX(85deg);
}
.neptune {
width: 52px;
height: 52px;
background: radial-gradient(circle at 30% 30%, #3b82f6 0%, #1d4ed8 50%, #1e40af 100%);
top: -26px;
right: -26px;
box-shadow: 0 0 18px rgba(59, 130, 246, 0.4);
position: absolute;
overflow: hidden;
}
.neptune::before {
content: '';
position: absolute;
top: 20%;
left: 15%;
width: 12px;
height: 8px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
animation: neptune-storm 12s linear infinite;
}
@keyframes neptune-storm {
0% { transform: rotate(0deg) translateX(15px) rotate(0deg); opacity: 0.3; }
50% { opacity: 0.6; }
100% { transform: rotate(360deg) translateX(15px) rotate(-360deg); opacity: 0.3; }
}
.asteroid-belt {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 600px;
.neptune::before {
content: '';
position: absolute;
top: 20%;
left: 15%;
width: 12px;
height: 8px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
animation: neptune-storm 12s linear infinite;
}
@keyframes neptune-storm {
0% { transform: rotate(0deg) translateX(15px) rotate(0deg); opacity: 0.3; }
50% { opacity: 0.6; }
100% { transform: rotate(360deg) translateX(15px) rotate(-360deg); opacity: 0.3; }
}
.asteroid-belt {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 600px;
border-radius: 50%;
}
.asteroid {
position: absolute;
width: 1px;
height: 1px;
background: #64748b;
border-radius: 50%;
opacity: 0.3;
animation: asteroid-orbit 120s linear infinite;
}
@keyframes asteroid-orbit {
0% { transform: rotate(0deg) translateX(300px) rotate(0deg); }
100% { transform: rotate(360deg) translateX(300px) rotate(-360deg); }
}
.planet-info {
position: absolute;
background: rgba(15, 23, 42, 0.9);
backdrop-filter: blur(10px);
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 8px;
padding: 8px 12px;
font-size: 0.75rem;
color: #e2e8f0;
}
.asteroid {
position: absolute;
width: 1px;
height: 1px;
background: #64748b;
border-radius: 50%;
opacity: 0.3;
animation: asteroid-orbit 120s linear infinite;
}
@keyframes asteroid-orbit {
0% { transform: rotate(0deg) translateX(300px) rotate(0deg); }
100% { transform: rotate(360deg) translateX(300px) rotate(-360deg); }
}
.planet-info {
position: absolute;
background: rgba(15, 23, 42, 0.9);
backdrop-filter: blur(10px);
border: 1px solid rgba(148, 163, 184, 0.2);
border-radius: 8px;
padding: 8px 12px;
font-size: 0.75rem;
color: #e2e8f0;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 10;
white-space: nowrap;
}
.celestial-body:hover .planet-info {
opacity: 1;
}
.sun .planet-info {
top: -40px;
left: 50%;
transform: translateX(-50%);
}
.earth .planet-info {
top: -40px;
left: 50%;
transform: translateX(-50%);
}
.mars .planet-info {
top: -40px;
left: 50%;
transform: translateX(-50%);
transition: opacity 0.3s ease;
pointer-events: none;
z-index: 10;
white-space: nowrap;
}
.celestial-body:hover .planet-info {
opacity: 1;
}
.sun .planet-info {
top: -40px;
left: 50%;
transform: translateX(-50%);
}
.earth .planet-info {
top: -40px;
left: 50%;
transform: translateX(-50%);
}
.mars .planet-info {
top: -40px;
left: 50%;
transform: translateX(-50%);
}
.jupiter .planet-info {
top: -40px;
left: 50%;
transform: translateX(-50%);
}
.saturn .planet-info {
top: -40px;
left: 50%;
transform: translateX(-50%);
}
.venus .planet-info {
top: -40px;
left: 50%;
transform: translateX(-50%);
}
.mercury .planet-info {
top: -40px;
left: 50%;
transform: translateX(-50%);
}
.uranus .planet-info {
.jupiter .planet-info {
top: -40px;
left: 50%;
transform: translateX(-50%);
}
.saturn .planet-info {
top: -40px;
left: 50%;
transform: translateX(-50%);
}
.venus .planet-info {
top: -40px;
left: 50%;
transform: translateX(-50%);
}
.mercury .planet-info {
top: -40px;
left: 50%;
transform: translateX(-50%);
}
.uranus .planet-info {
top: -40px;
left: 50%;
transform: translateX(-50%);
}
.neptune .planet-info {
top: -40px;
left: 50%;
transform: translateX(-50%);
}
.control-panel {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(15, 23, 42, 0.98);
backdrop-filter: blur(20px);
border-top: 1px solid rgba(148, 163, 184, 0.1);
padding: 32px 48px;
z-index: 50;
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
}
.control-content {
max-width: 1400px;
margin: 0 auto;
left: 50%;
transform: translateX(-50%);
}
.neptune .planet-info {
top: -40px;
left: 50%;
transform: translateX(-50%);
}
.control-panel {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(15, 23, 42, 0.98);
backdrop-filter: blur(20px);
border-top: 1px solid rgba(148, 163, 184, 0.1);
padding: 32px 48px;
z-index: 50;
box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
}
.control-content {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 40px;
align-items: center;
}
.mission-info {
display: flex;
flex-direction: column;
gap: 10px;
}
.mission-title {
font-size: 1rem;
font-weight: 500;
color: #f8fafc;
letter-spacing: -0.025em;
}
.mission-details {
font-size: 0.875rem;
color: #94a3b8;
line-height: 1.5;
}
.launch-system {
display: flex;
grid-template-columns: 1fr auto 1fr;
gap: 40px;
align-items: center;
}
.mission-info {
display: flex;
flex-direction: column;
gap: 10px;
}
.mission-title {
font-size: 1rem;
font-weight: 500;
color: #f8fafc;
letter-spacing: -0.025em;
}
.mission-details {
font-size: 0.875rem;
color: #94a3b8;
line-height: 1.5;
}
.launch-system {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.rocket-container {
position: relative;
width: 80px;
height: 160px;
}
.rocket {
width: 100%;
height: 100%;
transition: all 4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transform-origin: center bottom;
cursor: pointer;
}
.rocket:hover:not(.launched) {
transform: translateY(-5px) scale(1.02);
filter: drop-shadow(0 8px 25px rgba(59, 130, 246, 0.4));
}
.rocket:hover:not(.launched) .rocket-body {
box-shadow:
inset 2px 0 8px rgba(255,255,255,0.4),
align-items: center;
gap: 20px;
}
.rocket-container {
position: relative;
width: 80px;
height: 160px;
}
.rocket {
width: 100%;
height: 100%;
transition: all 4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
transform-origin: center bottom;
cursor: pointer;
}
.rocket:hover:not(.launched) {
transform: translateY(-5px) scale(1.02);
filter: drop-shadow(0 8px 25px rgba(59, 130, 246, 0.4));
}
.rocket:hover:not(.launched) .rocket-body {
box-shadow:
inset 2px 0 8px rgba(255,255,255,0.4),
inset -2px 0 8px rgba(0,0,0,0.2),
0 4px 30px rgba(59, 130, 246, 0.3);
}
.rocket:hover:not(.launched) .rocket-nose {
box-shadow:
inset 1px 1px 4px rgba(255,255,255,0.5),
inset -1px -1px 4px rgba(0,0,0,0.3),
0 2px 15px rgba(59, 130, 246, 0.4);
}
.rocket.launched {
animation: interplanetary-journey 8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes interplanetary-journey {
0% {
transform: translateY(0) translateX(0) scale(1) rotate(0deg);
}
12% {
transform: translateY(-150px) translateX(200px) scale(0.9) rotate(15deg);
}
25% {
transform: translateY(-250px) translateX(350px) scale(0.8) rotate(30deg);
}
37% {
transform: translateY(-200px) translateX(150px) scale(0.7) rotate(45deg);
0 4px 30px rgba(59, 130, 246, 0.3);
}
.rocket:hover:not(.launched) .rocket-nose {
box-shadow:
inset 1px 1px 4px rgba(255,255,255,0.5),
inset -1px -1px 4px rgba(0,0,0,0.3),
0 2px 15px rgba(59, 130, 246, 0.4);
}
.rocket.launched {
animation: interplanetary-journey 8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes interplanetary-journey {
0% {
transform: translateY(0) translateX(0) scale(1) rotate(0deg);
}
12% {
transform: translateY(-150px) translateX(200px) scale(0.9) rotate(15deg);
}
25% {
transform: translateY(-250px) translateX(350px) scale(0.8) rotate(30deg);
}
37% {
transform: translateY(-200px) translateX(150px) scale(0.7) rotate(45deg);
}
50% {
transform: translateY(-300px) translateX(-50px) scale(0.6) rotate(60deg);
}
62% {
transform: translateY(-400px) translateX(-200px) scale(0.5) rotate(75deg);
}
75% {
transform: translateY(-350px) translateX(-400px) scale(0.4) rotate(90deg);
}
87% {
transform: translateY(-500px) translateX(-300px) scale(0.3) rotate(105deg);
}
100% {
transform: translateY(-800px) translateX(-100px) scale(0.2) rotate(120deg);
}
}
.rocket-body {
width: 32px;
height: 100px;
background: linear-gradient(to bottom, #e2e8f0 0%, #cbd5e1 100%);
margin: 0 auto;
border-radius: 2px;
position: relative;
border: 1px solid #94a3b8;
}
50% {
transform: translateY(-300px) translateX(-50px) scale(0.6) rotate(60deg);
}
62% {
transform: translateY(-400px) translateX(-200px) scale(0.5) rotate(75deg);
}
75% {
transform: translateY(-350px) translateX(-400px) scale(0.4) rotate(90deg);
}
87% {
transform: translateY(-500px) translateX(-300px) scale(0.3) rotate(105deg);
}
100% {
transform: translateY(-800px) translateX(-100px) scale(0.2) rotate(120deg);
}
}
.rocket-body {
width: 32px;
height: 100px;
background: linear-gradient(to bottom, #e2e8f0 0%, #cbd5e1 100%);
margin: 0 auto;
border-radius: 2px;
position: relative;
border: 1px solid #94a3b8;
}
.rocket-body::before {
content: '';
position: absolute;
top: 8px;
left: 4px;
right: 4px;
height: 2px;
background: #475569;
border-radius: 1px;
}
.rocket-body::after {
content: '';
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 12px;
background: #64748b;
border-radius: 2px;
border: 1px solid #475569;
}
.rocket-nose {
width: 32px;
content: '';
position: absolute;
top: 8px;
left: 4px;
right: 4px;
height: 2px;
background: #475569;
border-radius: 1px;
}
.rocket-body::after {
content: '';
position: absolute;
bottom: 8px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 12px;
background: #64748b;
border-radius: 2px;
border: 1px solid #475569;
}
.rocket-nose {
width: 32px;
height: 40px;
background: #94a3b8;
margin: 0 auto;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
position: relative;
border: 1px solid #64748b;
}
.rocket-window {
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
width: 8px;
height: 8px;
background: #475569;
border-radius: 1px;
border: 1px solid #334155;
}
.rocket-details {
position: absolute;
top: 30px;
left: 4px;
right: 4px;
height: 50px;
background: #f1f5f9;
background: #94a3b8;
margin: 0 auto;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
position: relative;
border: 1px solid #64748b;
}
.rocket-window {
position: absolute;
top: 15px;
left: 50%;
transform: translateX(-50%);
width: 8px;
height: 8px;
background: #475569;
border-radius: 1px;
border: 1px solid #334155;
}
.rocket-details {
position: absolute;
top: 30px;
left: 4px;
right: 4px;
height: 50px;
background: #f1f5f9;
border: 1px solid #cbd5e1;
}
.rocket-details::before {
content: '';
position: absolute;
top: 10px;
left: 4px;
right: 4px;
height: 1px;
background: #64748b;
}
.rocket-details::after {
content: '';
position: absolute;
bottom: 10px;
left: 4px;
right: 4px;
height: 1px;
background: #64748b;
}
.rocket-fins {
position: absolute;
bottom: -15px;
left: -12px;
}
.rocket-details::before {
content: '';
position: absolute;
top: 10px;
left: 4px;
right: 4px;
height: 1px;
background: #64748b;
}
.rocket-details::after {
content: '';
position: absolute;
bottom: 10px;
left: 4px;
right: 4px;
height: 1px;
background: #64748b;
}
.rocket-fins {
position: absolute;
bottom: -15px;
left: -12px;
right: -12px;
height: 25px;
}
.fin {
position: absolute;
bottom: 0;
background: #94a3b8;
border: 1px solid #64748b;
}
.fin-left {
left: 0;
width: 16px;
height: 20px;
clip-path: polygon(0% 100%, 100% 100%, 70% 0%);
}
.fin-right {
right: 0;
width: 16px;
height: 20px;
clip-path: polygon(0% 100%, 100% 100%, 30% 0%);
}
.propulsion {
position: absolute;
height: 25px;
}
.fin {
position: absolute;
bottom: 0;
background: #94a3b8;
border: 1px solid #64748b;
}
.fin-left {
left: 0;
width: 16px;
height: 20px;
clip-path: polygon(0% 100%, 100% 100%, 70% 0%);
}
.fin-right {
right: 0;
width: 16px;
height: 20px;
clip-path: polygon(0% 100%, 100% 100%, 30% 0%);
}
.propulsion {
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 30px;
opacity: 0;
transition: opacity 0.3s;
}
.rocket.launched .propulsion {
opacity: 1;
}
.flame {
position: absolute;
border-radius: 2px;
}
.flame-1 {
width: 8px;
height: 25px;
background: linear-gradient(to top, #dc2626 0%, #f59e0b 100%);
left: 6px;
}
.flame-2 {
width: 6px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 30px;
opacity: 0;
transition: opacity 0.3s;
}
.rocket.launched .propulsion {
opacity: 1;
}
.flame {
position: absolute;
border-radius: 2px;
}
.flame-1 {
width: 8px;
height: 25px;
background: linear-gradient(to top, #dc2626 0%, #f59e0b 100%);
left: 6px;
}
.flame-2 {
width: 6px;
height: 20px;
background: linear-gradient(to top, #991b1b 0%, #dc2626 100%);
left: 7px;
}
.flame-3 {
display: none;
}
.flame-4 {
display: none;
}
.exhaust-glow {
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 16px;
height: 16px;
background: radial-gradient(circle, rgba(245, 158, 11, 0.4) 0%, transparent 100%);
border-radius: 50%;
}
@keyframes rocket-shake {
0%, 100% { transform: translateX(0); }
10% { transform: translateX(-2px) rotate(-0.5deg); }
background: linear-gradient(to top, #991b1b 0%, #dc2626 100%);
left: 7px;
}
.flame-3 {
display: none;
}
.flame-4 {
display: none;
}
.exhaust-glow {
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 16px;
height: 16px;
background: radial-gradient(circle, rgba(245, 158, 11, 0.4) 0%, transparent 100%);
border-radius: 50%;
}
@keyframes rocket-shake {
0%, 100% { transform: translateX(0); }
10% { transform: translateX(-2px) rotate(-0.5deg); }
20% { transform: translateX(2px) rotate(0.5deg); }
30% { transform: translateX(-1px) rotate(-0.3deg); }
40% { transform: translateX(1px) rotate(0.3deg); }
50% { transform: translateX(-2px) rotate(-0.4deg); }
60% { transform: translateX(2px) rotate(0.4deg); }
70% { transform: translateX(-1px) rotate(-0.2deg); }
80% { transform: translateX(1px) rotate(0.2deg); }
90% { transform: translateX(-1px) rotate(-0.1deg); }
}
.launch-button {
background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
color: white;
border: none;
padding: 12px 24px;
font-size: 0.875rem;
font-weight: 500;
border-radius: 6px;
cursor: pointer;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
transition: all 0.2s ease;
letter-spacing: -0.025em;
position: relative;
overflow: hidden;
}
.launch-button::before {
30% { transform: translateX(-1px) rotate(-0.3deg); }
40% { transform: translateX(1px) rotate(0.3deg); }
50% { transform: translateX(-2px) rotate(-0.4deg); }
60% { transform: translateX(2px) rotate(0.4deg); }
70% { transform: translateX(-1px) rotate(-0.2deg); }
80% { transform: translateX(1px) rotate(0.2deg); }
90% { transform: translateX(-1px) rotate(-0.1deg); }
}
.launch-button {
background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
color: white;
border: none;
padding: 12px 24px;
font-size: 0.875rem;
font-weight: 500;
border-radius: 6px;
cursor: pointer;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
transition: all 0.2s ease;
letter-spacing: -0.025em;
position: relative;
overflow: hidden;
}
.launch-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.launch-button:hover::before {
left: 100%;
}
.launch-button:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.launch-button:active {
transform: translateY(0);
}
.launch-button.hidden {
opacity: 0;
pointer-events: none;
}
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.launch-button:hover::before {
left: 100%;
}
.launch-button:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.launch-button:active {
transform: translateY(0);
}
.launch-button.hidden {
opacity: 0;
pointer-events: none;
}
.launch-button:disabled {
background: linear-gradient(135deg, #64748b 0%, #475569 100%);
cursor: not-allowed;
opacity: 0.6;
}
.launch-button:disabled:hover {
transform: none;
box-shadow: 0 2px 8px rgba(100, 116, 139, 0.2);
}
.system-stats {
display: flex;
flex-direction: column;
gap: 10px;
text-align: right;
}
.stat-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
font-size: 0.875rem;
}
background: linear-gradient(135deg, #64748b 0%, #475569 100%);
cursor: not-allowed;
opacity: 0.6;
}
.launch-button:disabled:hover {
transform: none;
box-shadow: 0 2px 8px rgba(100, 116, 139, 0.2);
}
.system-stats {
display: flex;
flex-direction: column;
gap: 10px;
text-align: right;
}
.stat-item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 15px;
font-size: 0.875rem;
}
.stat-label {
color: #94a3b8;
font-weight: 400;
}
.stat-value {
color: #22c55e;
font-weight: 500;
font-family: 'SF Mono', 'Monaco', 'Cascadia Code', monospace;
}
.message-delivery {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(15, 23, 42, 0.98);
backdrop-filter: blur(24px);
border: 1px solid rgba(148, 163, 184, 0.1);
border-radius: 12px;
padding: 40px 48px;
text-align: center;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
opacity: 0;
scale: 0.95;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 200;
color: #94a3b8;
font-weight: 400;
}
.stat-value {
color: #22c55e;
font-weight: 500;
font-family: 'SF Mono', 'Monaco', 'Cascadia Code', monospace;
}
.message-delivery {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(15, 23, 42, 0.98);
backdrop-filter: blur(24px);
border: 1px solid rgba(148, 163, 184, 0.1);
border-radius: 12px;
padding: 40px 48px;
text-align: center;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
opacity: 0;
scale: 0.95;
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 200;
max-width: 480px;
}
.message-delivery.show {
opacity: 1;
scale: 1;
}
.message-icon {
width: 56px;
height: 56px;
background: linear-gradient(135deg, #3b82f6, #1e40af);
border-radius: 8px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
}
.message-title {
font-size: 1.5rem;
font-weight: 600;
margin: 0 0 12px 0;
color: #f8fafc;
letter-spacing: -0.025em;
}
}
.message-delivery.show {
opacity: 1;
scale: 1;
}
.message-icon {
width: 56px;
height: 56px;
background: linear-gradient(135deg, #3b82f6, #1e40af);
border-radius: 8px;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
}
.message-title {
font-size: 1.5rem;
font-weight: 600;
margin: 0 0 12px 0;
color: #f8fafc;
letter-spacing: -0.025em;
}
.message-subtitle {
font-size: 1rem;
color: #94a3b8;
margin: 0 0 24px 0;
line-height: 1.6;
}
.message-status {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.3);
padding: 12px 20px;
border-radius: 25px;
color: #22c55e;
font-weight: 600;
}
.particle-system {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 150;
}
font-size: 1rem;
color: #94a3b8;
margin: 0 0 24px 0;
line-height: 1.6;
}
.message-status {
display: inline-flex;
align-items: center;
gap: 10px;
background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.3);
padding: 12px 20px;
border-radius: 25px;
color: #22c55e;
font-weight: 600;
}
.particle-system {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 150;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: #3b82f6;
border-radius: 50%;
opacity: 0;
animation: particle-burst 3s ease-out forwards;
}
@keyframes particle-burst {
0% {
opacity: 0;
transform: scale(0) rotate(0deg);
}
20% {
opacity: 1;
transform: scale(1) rotate(90deg);
}
100% {
opacity: 0;
transform: scale(0) rotate(360deg) translateY(-100px);
}
}
@keyframes flyby-particle {
position: absolute;
width: 4px;
height: 4px;
background: #3b82f6;
border-radius: 50%;
opacity: 0;
animation: particle-burst 3s ease-out forwards;
}
@keyframes particle-burst {
0% {
opacity: 0;
transform: scale(0) rotate(0deg);
}
20% {
opacity: 1;
transform: scale(1) rotate(90deg);
}
100% {
opacity: 0;
transform: scale(0) rotate(360deg) translateY(-100px);
}
}
@keyframes flyby-particle {
0% {
opacity: 0;
transform: scale(0);
}
30% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0) translateY(-40px);
}
}
.trajectory-line {
position: absolute;
width: 2px;
height: 0;
background: linear-gradient(to top, transparent, #3b82f6, transparent);
left: 50%;
bottom: 200px;
transform: translateX(-50%);
opacity: 0;
transition: all 2s ease-out;
}
.trajectory-line.active {
opacity: 0;
transform: scale(0);
}
30% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0) translateY(-40px);
}
}
.trajectory-line {
position: absolute;
width: 2px;
height: 0;
background: linear-gradient(to top, transparent, #3b82f6, transparent);
left: 50%;
bottom: 200px;
transform: translateX(-50%);
opacity: 0;
transition: all 2s ease-out;
}
.trajectory-line.active {
height: 400px;
opacity: 0.6;
}
@media (max-width: 768px) {
.header {
padding: 12px 16px;
}
.header-content {
flex-direction: row;
justify-content: space-between;
gap: 10px;
}
.logo-text {
font-size: 1rem;
}
.logo-icon {
width: 28px;
height: 28px;
font-size: 14px;
}
.planet-selection-hint {
top: 80px;
opacity: 0.6;
}
@media (max-width: 768px) {
.header {
padding: 12px 16px;
}
.header-content {
flex-direction: row;
justify-content: space-between;
gap: 10px;
}
.logo-text {
font-size: 1rem;
}
.logo-icon {
width: 28px;
height: 28px;
font-size: 14px;
}
.planet-selection-hint {
top: 80px;
left: 16px;
right: 16px;
transform: none;
padding: 12px 16px;
}
.hint-text {
font-size: 0.8rem;
justify-content: center;
}
.control-panel {
padding: 20px 16px;
}
.control-content {
grid-template-columns: 1fr;
gap: 20px;
text-align: center;
}
.mission-info {
order: 2;
}
.launch-system {
order: 1;
right: 16px;
transform: none;
padding: 12px 16px;
}
.hint-text {
font-size: 0.8rem;
justify-content: center;
}
.control-panel {
padding: 20px 16px;
}
.control-content {
grid-template-columns: 1fr;
gap: 20px;
text-align: center;
}
.mission-info {
order: 2;
}
.launch-system {
order: 1;
}
.system-stats {
order: 3;
text-align: center;
}
.rocket-container {
width: 60px;
height: 120px;
}
.message-delivery {
margin: 16px;
padding: 32px 24px;
}
.message-title {
font-size: 1.25rem;
}
.message-subtitle {
font-size: 0.9rem;
}
.celestial-body {
min-width: 50px;
.system-stats {
order: 3;
text-align: center;
}
.rocket-container {
width: 60px;
height: 120px;
}
.message-delivery {
margin: 16px;
padding: 32px 24px;
}
.message-title {
font-size: 1.25rem;
}
.message-subtitle {
font-size: 0.9rem;
}
.celestial-body {
min-width: 50px;
min-height: 50px;
}
.celestial-body:hover {
transform: scale(1.4);
}
.celestial-body.selected {
transform: scale(1.5);
}
.earth {
width: 60px;
height: 60px;
top: -30px;
right: -30px;
}
.mars {
width: 50px;
height: 50px;
top: -25px;
right: -25px;
}
.venus {
width: 55px;
}
.celestial-body:hover {
transform: scale(1.4);
}
.celestial-body.selected {
transform: scale(1.5);
}
.earth {
width: 60px;
height: 60px;
top: -30px;
right: -30px;
}
.mars {
width: 50px;
height: 50px;
top: -25px;
right: -25px;
}
.venus {
width: 55px;
height: 55px;
top: -27.5px;
right: -27.5px;
}
.mercury {
width: 48px;
height: 48px;
top: -24px;
right: -24px;
}
.jupiter {
width: 80px;
height: 80px;
top: -40px;
right: -40px;
}
.saturn {
width: 70px;
height: 70px;
top: -35px;
right: -35px;
}
.uranus {
top: -27.5px;
right: -27.5px;
}
.mercury {
width: 48px;
height: 48px;
top: -24px;
right: -24px;
}
.jupiter {
width: 80px;
height: 80px;
top: -40px;
right: -40px;
}
.saturn {
width: 70px;
height: 70px;
top: -35px;
right: -35px;
}
.uranus {
width: 65px;
height: 65px;
top: -32.5px;
right: -32.5px;
}
.neptune {
width: 62px;
height: 62px;
top: -31px;
right: -31px;
}
.planet-info {
font-size: 0.7rem;
padding: 6px 10px;
white-space: normal;
max-width: 200px;
text-align: center;
}
}
@media (max-width: 480px) {
.solar-system {
transform: translate(-50%, -50%) scale(0.8);
}
height: 65px;
top: -32.5px;
right: -32.5px;
}
.neptune {
width: 62px;
height: 62px;
top: -31px;
right: -31px;
}
.planet-info {
font-size: 0.7rem;
padding: 6px 10px;
white-space: normal;
max-width: 200px;
text-align: center;
}
}
@media (max-width: 480px) {
.solar-system {
transform: translate(-50%, -50%) scale(0.8);
}
.orbit {
border-width: 0.5px;
}
.celestial-body {
min-width: 45px;
min-height: 45px;
}
.message-delivery {
margin: 12px;
padding: 24px 16px;
}
.hint-text {
font-size: 0.75rem;
}
}
</style>
</head>
<body>
<div class="mission-control">
<header class="header">
<div class="header-content">
<div class="logo">
<div class="logo-icon">🚀</div>
<div class="logo-text">Stellar Communications</div>
border-width: 0.5px;
}
.celestial-body {
min-width: 45px;
min-height: 45px;
}
.message-delivery {
margin: 12px;
padding: 24px 16px;
}
.hint-text {
font-size: 0.75rem;
}
}
</style>
</head>
<body>
<div class="mission-control">
<header class="header">
<div class="header-content">
<div class="logo">
<div class="logo-icon">🚀</div>
<div class="logo-text">Stellar Communications</div>
</div>
<div class="mission-status">
<div class="status-indicator">
<div class="status-dot"></div>
<span>Mission Ready</span>
</div>
</div>
</div>
</header>
<div class="planet-selection-hint" id="selectionHint">
<p class="hint-text">
👆 Tap any planet to select your destination
</p>
</div>
<div class="space-field">
<div class="stars-layer" id="starsLayer"></div>
<div class="nebula"></div>
<div class="solar-system">
<!-- Orbital paths -->
<div class="orbit orbit-mercury"></div>
<div class="orbit orbit-venus"></div>
<div class="orbit orbit-earth"></div>
<div class="orbit orbit-mars"></div>
<div class="orbit orbit-asteroid"></div>
<div class="mission-status">
<div class="status-indicator">
<div class="status-dot"></div>
<span>Mission Ready</span>
</div>
</div>
</div>
</header>
<div class="planet-selection-hint" id="selectionHint">
<p class="hint-text">
👆 Tap any planet to select your destination
</p>
</div>
<div class="space-field">
<div class="stars-layer" id="starsLayer"></div>
<div class="nebula"></div>
<div class="solar-system">
<!-- Orbital paths -->
<div class="orbit orbit-mercury"></div>
<div class="orbit orbit-venus"></div>
<div class="orbit orbit-earth"></div>
<div class="orbit orbit-mars"></div>
<div class="orbit orbit-asteroid"></div>
<div class="orbit orbit-jupiter"></div>
<div class="orbit orbit-saturn"></div>
<div class="orbit orbit-uranus"></div>
<div class="orbit orbit-neptune"></div>
<!-- Central Sun -->
<div class="celestial-body sun" data-planet="sun">
<div class="planet-info">Sol • Mass: 1.989×10³⁰ kg • Temp: 5778K • Type: G2V</div>
</div>
<!-- Mercury Orbit -->
<div class="planet-orbit mercury-orbit">
<div class="celestial-body mercury" data-planet="mercury">
<div class="planet-info">Mercury • Mass: 3.301×10²³ kg • Orbit: 87.97d • Dist: 0.39
AU</div>
</div>
</div>
<!-- Venus Orbit -->
<div class="planet-orbit venus-orbit">
<div class="celestial-body venus" data-planet="venus">
<div class="planet-info">Venus • Mass: 4.867×10²⁴ kg • Orbit: 224.7d • Dist: 0.72
AU</div>
</div>
</div>
<!-- Earth Orbit -->
<div class="planet-orbit earth-orbit">
<div class="orbit orbit-saturn"></div>
<div class="orbit orbit-uranus"></div>
<div class="orbit orbit-neptune"></div>
<!-- Central Sun -->
<div class="celestial-body sun" data-planet="sun">
<div class="planet-info">Sol • Mass: 1.989×10³⁰ kg • Temp: 5778K • Type: G2V</div>
</div>
<!-- Mercury Orbit -->
<div class="planet-orbit mercury-orbit">
<div class="celestial-body mercury" data-planet="mercury">
<div class="planet-info">Mercury • Mass: 3.301×10²³ kg • Orbit: 87.97d • Dist: 0.39
AU</div>
</div>
</div>
<!-- Venus Orbit -->
<div class="planet-orbit venus-orbit">
<div class="celestial-body venus" data-planet="venus">
<div class="planet-info">Venus • Mass: 4.867×10²⁴ kg • Orbit: 224.7d • Dist: 0.72
AU</div>
</div>
</div>
<!-- Earth Orbit -->
<div class="planet-orbit earth-orbit">
<div class="celestial-body earth selected" data-planet="earth">
<div class="planet-info">Earth • Mass: 5.972×10²⁴ kg • Orbit: 365.26d • Dist: 1.00
AU</div>
</div>
<div class="earth-atmosphere"></div>
</div>
<!-- Mars Orbit -->
<div class="planet-orbit mars-orbit">
<div class="celestial-body mars" data-planet="mars">
<div class="planet-info">Mars • Mass: 6.417×10²³ kg • Orbit: 686.98d • Dist: 1.52
AU</div>
</div>
</div>
<!-- Asteroid Belt -->
<div class="asteroid-belt" id="asteroidBelt"></div>
<!-- Jupiter Orbit -->
<div class="planet-orbit jupiter-orbit">
<div class="celestial-body jupiter" data-planet="jupiter">
<div class="planet-info">Jupiter • Mass: 1.898×10²⁷ kg • Orbit: 11.86y • Dist: 5.20
AU</div>
</div>
</div>
<!-- Saturn Orbit -->
<div class="planet-orbit saturn-orbit">
<div class="planet-info">Earth • Mass: 5.972×10²⁴ kg • Orbit: 365.26d • Dist: 1.00
AU</div>
</div>
<div class="earth-atmosphere"></div>
</div>
<!-- Mars Orbit -->
<div class="planet-orbit mars-orbit">
<div class="celestial-body mars" data-planet="mars">
<div class="planet-info">Mars • Mass: 6.417×10²³ kg • Orbit: 686.98d • Dist: 1.52
AU</div>
</div>
</div>
<!-- Asteroid Belt -->
<div class="asteroid-belt" id="asteroidBelt"></div>
<!-- Jupiter Orbit -->
<div class="planet-orbit jupiter-orbit">
<div class="celestial-body jupiter" data-planet="jupiter">
<div class="planet-info">Jupiter • Mass: 1.898×10²⁷ kg • Orbit: 11.86y • Dist: 5.20
AU</div>
</div>
</div>
<!-- Saturn Orbit -->
<div class="planet-orbit saturn-orbit">
<div class="celestial-body saturn" data-planet="saturn">
<div class="planet-info">Saturn • Mass: 5.683×10²⁶ kg • Orbit: 29.46y • Dist: 9.54
AU</div>
</div>
</div>
<!-- Uranus Orbit -->
<div class="planet-orbit uranus-orbit">
<div class="celestial-body uranus" data-planet="uranus">
<div class="planet-info">Uranus • Mass: 8.681×10²⁵ kg • Orbit: 84.01y • Dist: 19.19
AU</div>
</div>
</div>
<!-- Neptune Orbit -->
<div class="planet-orbit neptune-orbit">
<div class="celestial-body neptune" data-planet="neptune">
<div class="planet-info">Neptune • Mass: 1.024×10²⁶ kg • Orbit: 164.8y • Dist: 30.07
AU</div>
</div>
</div>
</div>
<div class="trajectory-line" id="trajectoryLine"></div>
</div>
<div class="control-panel">
<div class="control-content">
<div class="planet-info">Saturn • Mass: 5.683×10²⁶ kg • Orbit: 29.46y • Dist: 9.54
AU</div>
</div>
</div>
<!-- Uranus Orbit -->
<div class="planet-orbit uranus-orbit">
<div class="celestial-body uranus" data-planet="uranus">
<div class="planet-info">Uranus • Mass: 8.681×10²⁵ kg • Orbit: 84.01y • Dist: 19.19
AU</div>
</div>
</div>
<!-- Neptune Orbit -->
<div class="planet-orbit neptune-orbit">
<div class="celestial-body neptune" data-planet="neptune">
<div class="planet-info">Neptune • Mass: 1.024×10²⁶ kg • Orbit: 164.8y • Dist: 30.07
AU</div>
</div>
</div>
</div>
<div class="trajectory-line" id="trajectoryLine"></div>
</div>
<div class="control-panel">
<div class="control-content">
<div class="mission-info">
<div class="mission-title" id="missionTitle">Select a Planet to Begin Mission</div>
<div class="mission-details" id="missionDetails">
Tap any planet in the solar system<br>
Payload: "Hello Khushi the Baddie!"<br>
Status: Awaiting Destination Selection
</div>
</div>
<div class="launch-system">
<div class="rocket-container">
<div class="rocket" id="rocket">
<div class="rocket-nose"></div>
<div class="rocket-body">
<div class="rocket-window"></div>
<div class="rocket-details"></div>
<div class="rocket-fins">
<div class="fin fin-left"></div>
<div class="fin fin-right"></div>
</div>
</div>
<div class="propulsion">
<div class="exhaust-glow"></div>
<div class="flame flame-1"></div>
<div class="flame flame-2"></div>
<div class="flame flame-3"></div>
<div class="flame flame-4"></div>
<div class="mission-title" id="missionTitle">Select a Planet to Begin Mission</div>
<div class="mission-details" id="missionDetails">
Tap any planet in the solar system<br>
Payload: "Hello Khushi the Baddie!"<br>
Status: Awaiting Destination Selection
</div>
</div>
<div class="launch-system">
<div class="rocket-container">
<div class="rocket" id="rocket">
<div class="rocket-nose"></div>
<div class="rocket-body">
<div class="rocket-window"></div>
<div class="rocket-details"></div>
<div class="rocket-fins">
<div class="fin fin-left"></div>
<div class="fin fin-right"></div>
</div>
</div>
<div class="propulsion">
<div class="exhaust-glow"></div>
<div class="flame flame-1"></div>
<div class="flame flame-2"></div>
<div class="flame flame-3"></div>
<div class="flame flame-4"></div>
</div>
</div>
</div>
<button class="launch-button" id="launchButton" disabled>
Select a Planet First
</button>
</div>
<div class="system-stats">
<div class="stat-item">
<span class="stat-label">Fuel Level:</span>
<span class="stat-value">100%</span>
</div>
<div class="stat-item">
<span class="stat-label">Navigation:</span>
<span class="stat-value">LOCKED</span>
</div>
<div class="stat-item">
<span class="stat-label">Weather:</span>
<span class="stat-value">OPTIMAL</span>
</div>
</div>
</div>
</div>
<div class="message-delivery" id="messageDelivery">
<div class="message-icon">📡</div>
</div>
</div>
<button class="launch-button" id="launchButton" disabled>
Select a Planet First
</button>
</div>
<div class="system-stats">
<div class="stat-item">
<span class="stat-label">Fuel Level:</span>
<span class="stat-value">100%</span>
</div>
<div class="stat-item">
<span class="stat-label">Navigation:</span>
<span class="stat-value">LOCKED</span>
</div>
<div class="stat-item">
<span class="stat-label">Weather:</span>
<span class="stat-value">OPTIMAL</span>
</div>
</div>
</div>
</div>
<div class="message-delivery" id="messageDelivery">
<div class="message-icon">📡</div>
<h1 class="message-title">Message Delivered!</h1>
<p class="message-subtitle" id="deliveryMessage">
"Hello Khushi the Baddie!" has been successfully transmitted to Earth with precision
targeting and optimal signal strength.
</p>
<div class="message-status">
<span>✓</span>
<span>Delivery Confirmed</span>
</div>
</div>
<div class="particle-system" id="particleSystem"></div>
</div>
<script>
class StellarCommunications {
constructor() {
// Cache DOM elements
this.elements = {
rocket: document.getElementById('rocket'),
launchButton: document.getElementById('launchButton'),
messageDelivery: document.getElementById('messageDelivery'),
trajectoryLine: document.getElementById('trajectoryLine'),
particleSystem: document.getElementById('particleSystem'),
missionTitle: document.getElementById('missionTitle'),
missionDetails: document.getElementById('missionDetails'),
deliveryMessage: document.getElementById('deliveryMessage'),
statusIndicator: document.querySelector('.status-indicator span'),
<p class="message-subtitle" id="deliveryMessage">
"Hello Khushi the Baddie!" has been successfully transmitted to Earth with precision
targeting and optimal signal strength.
</p>
<div class="message-status">
<span>✓</span>
<span>Delivery Confirmed</span>
</div>
</div>
<div class="particle-system" id="particleSystem"></div>
</div>
<script>
class StellarCommunications {
constructor() {
// Cache DOM elements
this.elements = {
rocket: document.getElementById('rocket'),
launchButton: document.getElementById('launchButton'),
messageDelivery: document.getElementById('messageDelivery'),
trajectoryLine: document.getElementById('trajectoryLine'),
particleSystem: document.getElementById('particleSystem'),
missionTitle: document.getElementById('missionTitle'),
missionDetails: document.getElementById('missionDetails'),
deliveryMessage: document.getElementById('deliveryMessage'),
statusIndicator: document.querySelector('.status-indicator span'),
statusDot: document.querySelector('.status-dot')
};
this.selectedPlanet = 'earth';
this.isLaunching = false;
// Simplified planet data
this.planetData = {
earth: { name: 'Earth', distance: '1.00 AU', travelTime: '8.3 minutes' },
mars: { name: 'Mars', distance: '1.52 AU', travelTime: '12.6 minutes' },
venus: { name: 'Venus', distance: '0.72 AU', travelTime: '6.0 minutes' },
jupiter: { name: 'Jupiter', distance: '5.20 AU', travelTime: '43.2 minutes' },
saturn: { name: 'Saturn', distance: '9.54 AU', travelTime: '79.3 minutes' },
mercury: { name: 'Mercury', distance: '0.39 AU', travelTime: '3.2 minutes' },
uranus: { name: 'Uranus', distance: '19.19 AU', travelTime: '159.5 minutes' },
neptune: { name: 'Neptune', distance: '30.07 AU', travelTime: '249.8 minutes' }
};
this.init();
}
init() {
this.generateStarField();
this.setupPlanetSelection();
this.elements.launchButton.addEventListener('click', (e) => {
e.preventDefault();
console.log('Launch button clicked!', {
};
this.selectedPlanet = 'earth';
this.isLaunching = false;
// Simplified planet data
this.planetData = {
earth: { name: 'Earth', distance: '1.00 AU', travelTime: '8.3 minutes' },
mars: { name: 'Mars', distance: '1.52 AU', travelTime: '12.6 minutes' },
venus: { name: 'Venus', distance: '0.72 AU', travelTime: '6.0 minutes' },
jupiter: { name: 'Jupiter', distance: '5.20 AU', travelTime: '43.2 minutes' },
saturn: { name: 'Saturn', distance: '9.54 AU', travelTime: '79.3 minutes' },
mercury: { name: 'Mercury', distance: '0.39 AU', travelTime: '3.2 minutes' },
uranus: { name: 'Uranus', distance: '19.19 AU', travelTime: '159.5 minutes' },
neptune: { name: 'Neptune', distance: '30.07 AU', travelTime: '249.8 minutes' }
};
this.init();
}
init() {
this.generateStarField();
this.setupPlanetSelection();
this.elements.launchButton.addEventListener('click', (e) => {
e.preventDefault();
console.log('Launch button clicked!', {
selectedPlanet: this.selectedPlanet,
isLaunching: this.isLaunching,
buttonDisabled: this.elements.launchButton.disabled
});
this.initiateLaunch();
});
// Also add touch event for mobile
this.elements.launchButton.addEventListener('touchstart', (e) => {
e.preventDefault();
console.log('Launch button touched!');
this.initiateLaunch();
}, { passive: false });
}
setupPlanetSelection() {
const celestialBodies = document.querySelectorAll('.celestial-body[data-planet]');
const hint = document.getElementById('selectionHint');
celestialBodies.forEach(body => {
const handleSelection = (e) => {
e.preventDefault();
const planet = body.dataset.planet;
if (planet && planet !== 'sun') {
this.selectPlanet(planet);
if (hint) hint.style.display = 'none';
}
isLaunching: this.isLaunching,
buttonDisabled: this.elements.launchButton.disabled
});
this.initiateLaunch();
});
// Also add touch event for mobile
this.elements.launchButton.addEventListener('touchstart', (e) => {
e.preventDefault();
console.log('Launch button touched!');
this.initiateLaunch();
}, { passive: false });
}
setupPlanetSelection() {
const celestialBodies = document.querySelectorAll('.celestial-body[data-planet]');
const hint = document.getElementById('selectionHint');
celestialBodies.forEach(body => {
const handleSelection = (e) => {
e.preventDefault();
const planet = body.dataset.planet;
if (planet && planet !== 'sun') {
this.selectPlanet(planet);
if (hint) hint.style.display = 'none';
}
};
body.addEventListener('click', handleSelection);
body.addEventListener('touchstart', handleSelection, { passive: false });
});
}
selectPlanet(planetKey) {
const planetInfo = this.planetData[planetKey];
if (!planetInfo) return;
this.selectedPlanet = planetKey;
// Update UI elements using cached references
this.elements.missionTitle.textContent = `Mission: Message to ${planetInfo.name}`;
this.elements.missionDetails.innerHTML =
`Destination: ${planetInfo.name} (${planetInfo.distance})<br>Payload: "Hello Khushi the
Baddie!"<br>Status: Ready for Launch • ETA: ${planetInfo.travelTime}`;
// Update selection state
document.querySelectorAll('.celestial-body').forEach(body =>
body.classList.remove('selected'));
document.querySelector(`[data-planet="${planetKey}"]`).classList.add('selected');
// Enable launch button
this.elements.launchButton.textContent = `Launch to ${planetInfo.name}`;
this.elements.launchButton.disabled = false;
}
body.addEventListener('click', handleSelection);
body.addEventListener('touchstart', handleSelection, { passive: false });
});
}
selectPlanet(planetKey) {
const planetInfo = this.planetData[planetKey];
if (!planetInfo) return;
this.selectedPlanet = planetKey;
// Update UI elements using cached references
this.elements.missionTitle.textContent = `Mission: Message to ${planetInfo.name}`;
this.elements.missionDetails.innerHTML =
`Destination: ${planetInfo.name} (${planetInfo.distance})<br>Payload: "Hello Khushi the
Baddie!"<br>Status: Ready for Launch • ETA: ${planetInfo.travelTime}`;
// Update selection state
document.querySelectorAll('.celestial-body').forEach(body =>
body.classList.remove('selected'));
document.querySelector(`[data-planet="${planetKey}"]`).classList.add('selected');
// Enable launch button
this.elements.launchButton.textContent = `Launch to ${planetInfo.name}`;
this.elements.launchButton.disabled = false;
}
generateStarField() {
const starsLayer = document.getElementById('starsLayer');
const fragment = document.createDocumentFragment();
// Reduced star count for better performance
for (let i = 0; i < 100; i++) {
const star = document.createElement('div');
star.className = Math.random() > 0.8 ? 'star bright' : 'star';
const size = Math.random() * 3 + 1;
star.style.cssText = `
left: ${Math.random() * 100}%;
top: ${Math.random() * 100}%;
width: ${size}px;
height: ${size}px;
animation-delay: ${Math.random() * 3}s;
animation-duration: ${Math.random() * 2 + 2}s;
`;
fragment.appendChild(star);
}
starsLayer.appendChild(fragment);
this.generateAsteroidBelt();
}
const starsLayer = document.getElementById('starsLayer');
const fragment = document.createDocumentFragment();
// Reduced star count for better performance
for (let i = 0; i < 100; i++) {
const star = document.createElement('div');
star.className = Math.random() > 0.8 ? 'star bright' : 'star';
const size = Math.random() * 3 + 1;
star.style.cssText = `
left: ${Math.random() * 100}%;
top: ${Math.random() * 100}%;
width: ${size}px;
height: ${size}px;
animation-delay: ${Math.random() * 3}s;
animation-duration: ${Math.random() * 2 + 2}s;
`;
fragment.appendChild(star);
}
starsLayer.appendChild(fragment);
this.generateAsteroidBelt();
}
generateAsteroidBelt() {
const asteroidBelt = document.getElementById('asteroidBelt');
const asteroidCount = 80;
for (let i = 0; i < asteroidCount; i++) {
const asteroid = document.createElement('div');
asteroid.className = 'asteroid';
const size = Math.random() * 2 + 2;
asteroid.style.width = size + 'px';
asteroid.style.height = size + 'px';
const angle = (360 / asteroidCount) * i + Math.random() * 10;
asteroid.style.transform = `rotate(${angle}deg) translateX(300px) rotate(-${angle}deg)`;
asteroid.style.animationDelay = Math.random() * 30 + 's';
asteroid.style.animationDuration = (25 + Math.random() * 10) + 's';
asteroid.style.opacity = 0.3 + Math.random() * 0.4;
const grayShade = Math.floor(Math.random() * 50) + 120;
asteroid.style.background = `rgb(${grayShade}, ${grayShade}, ${grayShade})`;
asteroidBelt.appendChild(asteroid);
}
}
const asteroidBelt = document.getElementById('asteroidBelt');
const asteroidCount = 80;
for (let i = 0; i < asteroidCount; i++) {
const asteroid = document.createElement('div');
asteroid.className = 'asteroid';
const size = Math.random() * 2 + 2;
asteroid.style.width = size + 'px';
asteroid.style.height = size + 'px';
const angle = (360 / asteroidCount) * i + Math.random() * 10;
asteroid.style.transform = `rotate(${angle}deg) translateX(300px) rotate(-${angle}deg)`;
asteroid.style.animationDelay = Math.random() * 30 + 's';
asteroid.style.animationDuration = (25 + Math.random() * 10) + 's';
asteroid.style.opacity = 0.3 + Math.random() * 0.4;
const grayShade = Math.floor(Math.random() * 50) + 120;
asteroid.style.background = `rgb(${grayShade}, ${grayShade}, ${grayShade})`;
asteroidBelt.appendChild(asteroid);
}
}
createParticleBurst() {
const particleCount = 25;
for (let i = 0; i < particleCount; i++) {
setTimeout(() => {
const particle = document.createElement('div');
particle.className = 'particle';
const angle = (360 / particleCount) * i;
const distance = Math.random() * 100 + 50;
particle.style.left = '50%';
particle.style.bottom = '200px';
particle.style.transform = `translate(-50%, 0) rotate(${angle}deg)
translateY(-${distance}px)`;
particle.style.animationDelay = Math.random() * 0.5 + 's';
const colors = ['#3b82f6', '#60a5fa', '#93c5fd', '#fbbf24', '#f59e0b'];
particle.style.background = colors[Math.floor(Math.random() * colors.length)];
this.particleSystem.appendChild(particle);
setTimeout(() => {
particle.remove();
}, 3000);
}, i * 50);
}
}
const particleCount = 25;
for (let i = 0; i < particleCount; i++) {
setTimeout(() => {
const particle = document.createElement('div');
particle.className = 'particle';
const angle = (360 / particleCount) * i;
const distance = Math.random() * 100 + 50;
particle.style.left = '50%';
particle.style.bottom = '200px';
particle.style.transform = `translate(-50%, 0) rotate(${angle}deg)
translateY(-${distance}px)`;
particle.style.animationDelay = Math.random() * 0.5 + 's';
const colors = ['#3b82f6', '#60a5fa', '#93c5fd', '#fbbf24', '#f59e0b'];
particle.style.background = colors[Math.floor(Math.random() * colors.length)];
this.particleSystem.appendChild(particle);
setTimeout(() => {
particle.remove();
}, 3000);
}, i * 50);
}
}
updateMissionStatus(status) {
this.elements.statusIndicator.textContent = status;
if (status === 'Launch in Progress') {
this.elements.statusDot.style.background = '#f59e0b';
} else if (status === 'Mission Complete') {
this.elements.statusDot.style.background = '#22c55e';
} else if (status === 'Mission Ready') {
this.elements.statusDot.style.background = '#22c55e';
}
}
initiateLaunch() {
if (!this.selectedPlanet || this.isLaunching || this.elements.launchButton.disabled) return;
this.isLaunching = true;
const planetInfo = this.planetData[this.selectedPlanet];
// Disable button and show countdown
this.elements.launchButton.disabled = true;
this.elements.launchButton.textContent = 'T-minus 3...';
this.updateMissionStatus('Launch Sequence Initiated');
// Countdown sequence
setTimeout(() => {
this.elements.launchButton.textContent = 'T-minus 2...';
this.elements.statusIndicator.textContent = status;
if (status === 'Launch in Progress') {
this.elements.statusDot.style.background = '#f59e0b';
} else if (status === 'Mission Complete') {
this.elements.statusDot.style.background = '#22c55e';
} else if (status === 'Mission Ready') {
this.elements.statusDot.style.background = '#22c55e';
}
}
initiateLaunch() {
if (!this.selectedPlanet || this.isLaunching || this.elements.launchButton.disabled) return;
this.isLaunching = true;
const planetInfo = this.planetData[this.selectedPlanet];
// Disable button and show countdown
this.elements.launchButton.disabled = true;
this.elements.launchButton.textContent = 'T-minus 3...';
this.updateMissionStatus('Launch Sequence Initiated');
// Countdown sequence
setTimeout(() => {
this.elements.launchButton.textContent = 'T-minus 2...';
this.updateMissionStatus('T-minus 2...');
}, 1000);
setTimeout(() => {
this.elements.launchButton.textContent = 'T-minus 1...';
this.updateMissionStatus('T-minus 1...');
}, 2000);
setTimeout(() => {
this.elements.launchButton.textContent = 'IGNITION!';
this.updateMissionStatus('Ignition!');
}, 3000);
// Launch sequence
setTimeout(() => {
this.elements.trajectoryLine.classList.add('active');
this.createParticleBurst();
this.elements.rocket.classList.add('launched');
this.elements.launchButton.style.display = 'none';
this.updateMissionStatus('Launch in Progress');
}, 3500);
// Mission completion
setTimeout(() => {
this.elements.deliveryMessage.innerHTML =
`"Hello Khushi the Baddie!" has been successfully transmitted to ${planetInfo.name}
with precision targeting and optimal signal strength.`;
this.elements.messageDelivery.classList.add('show');
}, 1000);
setTimeout(() => {
this.elements.launchButton.textContent = 'T-minus 1...';
this.updateMissionStatus('T-minus 1...');
}, 2000);
setTimeout(() => {
this.elements.launchButton.textContent = 'IGNITION!';
this.updateMissionStatus('Ignition!');
}, 3000);
// Launch sequence
setTimeout(() => {
this.elements.trajectoryLine.classList.add('active');
this.createParticleBurst();
this.elements.rocket.classList.add('launched');
this.elements.launchButton.style.display = 'none';
this.updateMissionStatus('Launch in Progress');
}, 3500);
// Mission completion
setTimeout(() => {
this.elements.deliveryMessage.innerHTML =
`"Hello Khushi the Baddie!" has been successfully transmitted to ${planetInfo.name}
with precision targeting and optimal signal strength.`;
this.elements.messageDelivery.classList.add('show');
this.updateMissionStatus('Mission Complete');
}, 9000);
// Reset
setTimeout(() => this.resetMission(), 15000);
}
addRocketShake() {
const rocketContainer = document.querySelector('.rocket-container');
rocketContainer.style.animation = 'rocket-shake 0.5s ease-in-out';
setTimeout(() => {
rocketContainer.style.animation = '';
}, 500);
}
schedulePlanetaryFlybys() {
const planets = [
{ element: '.mercury', time: 1000, name: 'Mercury' },
{ element: '.venus', time: 2000, name: 'Venus' },
{ element: '.earth', time: 3000, name: 'Earth' },
{ element: '.mars', time: 4000, name: 'Mars' },
{ element: '.jupiter', time: 5000, name: 'Jupiter' },
{ element: '.saturn', time: 6000, name: 'Saturn' }
];
planets.forEach(planet => {
setTimeout(() => {
}, 9000);
// Reset
setTimeout(() => this.resetMission(), 15000);
}
addRocketShake() {
const rocketContainer = document.querySelector('.rocket-container');
rocketContainer.style.animation = 'rocket-shake 0.5s ease-in-out';
setTimeout(() => {
rocketContainer.style.animation = '';
}, 500);
}
schedulePlanetaryFlybys() {
const planets = [
{ element: '.mercury', time: 1000, name: 'Mercury' },
{ element: '.venus', time: 2000, name: 'Venus' },
{ element: '.earth', time: 3000, name: 'Earth' },
{ element: '.mars', time: 4000, name: 'Mars' },
{ element: '.jupiter', time: 5000, name: 'Jupiter' },
{ element: '.saturn', time: 6000, name: 'Saturn' }
];
planets.forEach(planet => {
setTimeout(() => {
this.createPlanetaryFlyby(planet.element, planet.name);
}, planet.time);
});
}
createPlanetaryFlyby(planetSelector, planetName) {
const planet = document.querySelector(planetSelector);
if (planet) {
planet.style.boxShadow = planet.style.boxShadow + ', 0 0 40px rgba(59, 130, 246, 0.8)';
planet.style.transform = 'scale(1.1)';
this.createFlybyParticles(planet);
setTimeout(() => {
planet.style.boxShadow = planet.style.boxShadow.replace(', 0 0 40px rgba(59, 130,
246, 0.8)', '');
planet.style.transform = 'scale(1)';
}, 800);
}
}
createFlybyParticles(planet) {
const rect = planet.getBoundingClientRect();
const particleCount = 8;
for (let i = 0; i < particleCount; i++) {
setTimeout(() => {
const particle = document.createElement('div');
}, planet.time);
});
}
createPlanetaryFlyby(planetSelector, planetName) {
const planet = document.querySelector(planetSelector);
if (planet) {
planet.style.boxShadow = planet.style.boxShadow + ', 0 0 40px rgba(59, 130, 246, 0.8)';
planet.style.transform = 'scale(1.1)';
this.createFlybyParticles(planet);
setTimeout(() => {
planet.style.boxShadow = planet.style.boxShadow.replace(', 0 0 40px rgba(59, 130,
246, 0.8)', '');
planet.style.transform = 'scale(1)';
}, 800);
}
}
createFlybyParticles(planet) {
const rect = planet.getBoundingClientRect();
const particleCount = 8;
for (let i = 0; i < particleCount; i++) {
setTimeout(() => {
const particle = document.createElement('div');
particle.className = 'particle';
particle.style.position = 'absolute';
particle.style.left = rect.left + rect.width / 2 + 'px';
particle.style.top = rect.top + rect.height / 2 + 'px';
particle.style.width = '3px';
particle.style.height = '3px';
particle.style.background = '#60a5fa';
particle.style.borderRadius = '50%';
particle.style.pointerEvents = 'none';
particle.style.zIndex = '160';
const angle = (360 / particleCount) * i;
const distance = 30 + Math.random() * 20;
particle.style.animation = `flyby-particle 1s ease-out forwards`;
particle.style.transform = `rotate(${angle}deg) translateY(-${distance}px)`;
document.body.appendChild(particle);
setTimeout(() => {
particle.remove();
}, 1000);
}, i * 50);
}
}
resetMission() {
particle.style.position = 'absolute';
particle.style.left = rect.left + rect.width / 2 + 'px';
particle.style.top = rect.top + rect.height / 2 + 'px';
particle.style.width = '3px';
particle.style.height = '3px';
particle.style.background = '#60a5fa';
particle.style.borderRadius = '50%';
particle.style.pointerEvents = 'none';
particle.style.zIndex = '160';
const angle = (360 / particleCount) * i;
const distance = 30 + Math.random() * 20;
particle.style.animation = `flyby-particle 1s ease-out forwards`;
particle.style.transform = `rotate(${angle}deg) translateY(-${distance}px)`;
document.body.appendChild(particle);
setTimeout(() => {
particle.remove();
}, 1000);
}, i * 50);
}
}
resetMission() {
this.elements.rocket.classList.remove('launched');
this.elements.messageDelivery.classList.remove('show');
this.elements.trajectoryLine.classList.remove('active');
this.elements.launchButton.style.display = 'block';
this.elements.launchButton.disabled = false;
this.elements.particleSystem.innerHTML = '';
this.updateMissionStatus('Mission Ready');
this.isLaunching = false;
// Restore button text based on selected planet
if (this.selectedPlanet && this.planetData[this.selectedPlanet]) {
this.elements.launchButton.textContent = `Launch to
${this.planetData[this.selectedPlanet].name}`;
} else {
this.elements.launchButton.textContent = 'Select a Planet First';
this.elements.launchButton.disabled = true;
}
}
}
// Initialize the application
document.addEventListener('DOMContentLoaded', () => {
new StellarCommunications();
});
</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var
d=b.createElement('script');d.innerHTML="window.__CF$cv$params=
{r:'98d02f66306dbdd5',t:'MTc2MDIwNDg3My4wMDAwMDA='};var
a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-
this.elements.messageDelivery.classList.remove('show');
this.elements.trajectoryLine.classList.remove('active');
this.elements.launchButton.style.display = 'block';
this.elements.launchButton.disabled = false;
this.elements.particleSystem.innerHTML = '';
this.updateMissionStatus('Mission Ready');
this.isLaunching = false;
// Restore button text based on selected planet
if (this.selectedPlanet && this.planetData[this.selectedPlanet]) {
this.elements.launchButton.textContent = `Launch to
${this.planetData[this.selectedPlanet].name}`;
} else {
this.elements.launchButton.textContent = 'Select a Planet First';
this.elements.launchButton.disabled = true;
}
}
}
// Initialize the application
document.addEventListener('DOMContentLoaded', () => {
new StellarCommunications();
});
</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var
d=b.createElement('script');d.innerHTML="window.__CF$cv$params=
{r:'98d02f66306dbdd5',t:'MTc2MDIwNDg3My4wMDAwMDA='};var
a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-
platform/scripts/jsd/main.js';document.getElementsByTagName('head')
[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var
a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.s
tyle.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!=
=document.readyState)c();else
if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var
e=document.onreadystatechange||function(){};document.onreadystatechange=function(b)
{e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
</body>
</html>
[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var
a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.s
tyle.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!=
=document.readyState)c();else
if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var
e=document.onreadystatechange||function(){};document.onreadystatechange=function(b)
{e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script>
</body>
</html>